<template>
    <el-select
        v-model="selectedValue"
        filterable
        remote
        :remote-method="remoteUserListHandle"
        placeholder="请选择用户"
        @change="emit('update:modelValue',selectedValue)"
    >
        <el-option
            v-for="item in userOptionList"
            :key="item.userId"
            :label="item.userName"
            :value="item.userId"
        />
    </el-select>
</template>

<script setup>
import {listUser} from "@/api/system/user.js";
import useUserStore from "@/store/modules/user.js";

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const userStore = useUserStore()
const deptId = userStore.info.deptId
const queryForms = reactive({
    deptId: deptId,
    pageNum: 1,
    pageSize: 50
})
// 本地的选中的值
const selectedValue = ref(null);

// 监听 modelValue 的变化，并在数据加载完成后赋值
watch(() => props.modelValue, (newValue) => {
    selectedValue.value = Number(newValue);
});

// 下拉数据
const userOptionList = ref([])

// 获取用户列表
const getUserList = async (query = '') => {
    if (query) queryForms.userName = query
    const res = await listUser(queryForms)
    // console.log(res)
    userOptionList.value = res.rows
}

// 远程处理搜索的用户列表
const remoteUserListHandle = (query) => {
    if (query) {
        getUserList(query)
        // console.log('remoteUserListHandle', query, queryForms)
    }
}

nextTick(() => {
    // 初始化获取数据
    getUserList()
})
</script>

<style scoped lang="scss">

</style>